<template>
    <app-layout v-model="safePt" title="订单" btnType="unset">
        <view class="order-container">
            <view class="fixed-box" :style="{ top: safePt + 'px' }">
                <view class="search-order">
                    <text class="iconfont icon-sousuo"></text>
                    <input
                        class="input"
                        v-model="keywords"
                        placeholder="输入订单编号/客户姓名/电话"
                        placeholder-class="placeholder-style-3"
                        @input="inputKeywords"
                    />
                </view>
                <view class="scroll-box">
                    <scroll-view scroll-x>
                        <view class="cate-group">
                            <view
                                class="cate-item"
                                v-for="(item, index) in tabList"
                                :key="index"
                                :class="{ active: tabIndex == index }"
                                @click="tabIndex = index"
                            >
                                {{ item.name }}
                            </view>
                        </view>
                    </scroll-view>
                </view>
            </view>
            <view class="order-group">
                <swiper
                    :current="tabIndex"
                    :style="{ minHeight: '75vh', height: tabHeight + 'px' }"
                    @change="switchTab($event.detail.current)"
                >
                    <swiper-item v-for="(item, index) in tabList" :key="index">
                        <view :class="['tab' + index]">
                            <view class="order-item-box" v-for="(v, k) in item.list" :key="k" @click.stop="toDetail(v.id)">
                                <order-item :order="v">
                                    <view class="order-action">
                                        <view class="price">¥ {{ v.price }}</view>
                                        <order-action :order="v" @confirmPrice="showPriceModal(v.id)" @refresh="refresh" />
                                    </view>
                                </order-item>
                            </view>
                            <view class="loadmore-box">
                                <load-more :hasMore="item.more" @loadmore="loadData" />
                            </view>
                        </view>
                    </swiper-item>
                </swiper>
            </view>
        </view>
        <order-confirm-price v-show="showConfirmModal" @close="showConfirmModal = false" @confirm="finishOrder" />
    </app-layout>
</template>

<script>
import AppLayout from "@/components/layout/layout";
import OrderItem from "@/components/order/item";
import OrderAction from "@/components/order/action";
import LoadMore from "@/components/widgets/loadmore";
import OrderConfirmPrice from "@/components/order/confirm-price";
import { mapState } from "vuex";
export default {
    name: "get-index",
    data() {
        return {
            utils: this.$utils,
            showConfirmModal: false,
            safePt: 0,
            tabIndex: 0,
            tabHeight: 0,
            tabList: [
                {
                    listType: "t1",
                    name: "全部订单",
                    more: true,
                    page: 1,
                    list: [],
                },
                {
                    listType: "t2",
                    name: "报/议价订单",
                    more: true,
                    page: 1,
                    list: [],
                },
                {
                    listType: "t3",
                    name: "货运订单",
                    more: true,
                    page: 1,
                    list: [],
                },
            ],
            currentId: 0,
            keywordsTimer: null,
            keywords: "",
        };
    },
    components: {
        AppLayout,
        OrderItem,
        OrderAction,
        LoadMore,
        OrderConfirmPrice,
    },
    computed: {
        ...mapState({
            refreshOrder: (state) => state.system.refreshOrder,
            orderTabIndex: (state) => state.system.orderTabIndex,
        }),
    },
    onLoad() {},
    onShow() {
        if (this.refreshOrder && this.orderTabIndex == this.tabIndex) {
            this.switchTab(this.tabIndex);
        }
        if (this.orderTabIndex != this.tabIndex) {
            // #ifdef H5
            setTimeout(() => {
                this.tabIndex = this.orderTabIndex;
            }, 10);
            // #endif
            // #ifndef H5
            this.tabIndex = this.orderTabIndex;
            // #endif
        }
    },
    onReady() {},
    onHide() {},
    onReachBottom() {
        this.loadData();
    },
    onPullDownRefresh() {
        this.switchTab(this.tabIndex);
        uni.stopPullDownRefresh();
    },
    onShareTimeline() {},
    onShareAppMessage() {},
    methods: {
        switchTab(index) {
            this.$store.commit("system/orderTabIndex", index);
            this.tabIndex = index;
            let currentTab = this.tabList[index];
            currentTab.page = 1;
            currentTab.more = true;
            currentTab.list = [];
            uni.pageScrollTo({
                scrollTop: 0,
                duration: 0,
            });
            this.loadData();
        },
        setTabHeight() {
            let query = uni.createSelectorQuery().in(this);
            query.select(".tab" + this.tabIndex).boundingClientRect();
            query.exec((res) => {
                if (res && res[0]) {
                    this.tabHeight = res[0].height;
                }
            });
        },
        showPriceModal(id) {
            this.$store.commit("order/setConfirmId", id);
            this.showConfirmModal = true;
        },
        /**
         * 确认订单
         */
        finishOrder(e) {
            this.showConfirmModal = false;
            let currentTab = this.tabList[this.tabIndex];
            this.$models.order
                .finishOrder({
                    request: {
                        api: "order.finish." + currentTab.listType,
                        data: {
                            id: e.id,
                            money: e.price,
                        },
                    },
                })
                .then((response) => {
                    this.$utils.toast(response.msg).then(() => {
                        this.switchTab(this.tabIndex);
                    });
                })
                .catch((e) => {
                    this.$utils.toast(e);
                });
        },
        /**
         * 加载数据
         */
        loadData() {
            let currentTab = this.tabList[this.tabIndex];
            return new Promise((resolve, reject) => {
                if (!currentTab.more) {
                    return;
                }
                this.$models.order
                    .getList({
                        request: {
                            api: "order.list." + currentTab.listType,
                            data: {
                                page: currentTab.page,
                                status: currentTab.status,
                                key: this.keywords,
                            },
                        },
                        listType: currentTab.listType,
                    })
                    .then((list) => {
                        if (list.length == 0) {
                            currentTab.more = false;
                        } else {
                            currentTab.page++;
                            currentTab.list = currentTab.list.concat(list);
                        }
                        this.$nextTick(() => {
                            this.setTabHeight();
                        });
                    });
            });
        },
        toDetail(id) {
            this.$store.commit("system/refreshOrder", false);
            let currentTab = this.tabList[this.tabIndex];
            this.$utils.toPage("/pages/order/detail?list=" + currentTab.listType + "&id=" + id);
        },
        refresh() {
            this.switchTab(this.tabIndex);
        },
        inputKeywords(e) {
            clearTimeout(this.keywordsTimer);
            this.keywordsTimer = setTimeout(() => {
                this.loadData();
            }, 1000);
        },
    },
};
</script>

<style lang="less" scoped>
.order-container {
    width: 100%;
    padding-bottom: 50rpx;
}
.fixed-box {
    z-index: 15;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #f6f6f6;
}
.search-order {
    display: flex;
    align-items: center;
    width: 670rpx;
    height: 66rpx;
    margin: 0 auto 20rpx auto;
    box-sizing: border-box;
    padding: 20rpx;
    background-color: #ffffff;
    border-radius: 10rpx;
    .iconfont {
        display: block;
        flex-shrink: 0;
        margin-right: 20rpx;
        font-size: 28rpx;
    }
    .input {
        width: 100%;
        font-size: 24rpx;
        color: #bebebe;
    }
}
.scroll-box {
    width: 100%;
    background-color: #f7a134;
    .cate-group {
        width: 100%;
        height: 96rpx;
        white-space: nowrap;
        box-sizing: border-box;
        padding: 5rpx 0;
        display: flex;
        justify-content: center;
        .cate-item {
            display: inline-block;
            height: 86rpx;
            line-height: 86rpx;
            margin: 0 20rpx;
            color: #ffffff;
        }
        .cate-item.active {
            box-sizing: border-box;
            border-bottom: 7rpx solid #ffffff;
        }
    }
}
.order-group {
    z-index: 10;
    position: relative;
    width: 100%;
    box-sizing: border-box;
    padding-top: 202rpx;
    .order-item-box {
        margin-bottom: 20rpx;
        background-color: #ffffff;
        box-sizing: border-box;
        padding: 0 40rpx;
        .order-action {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .price {
            width: 250rpx;
            font-size: 42rpx;
            font-weight: bold;
            color: #ec7655;
            line-height: 42rpx;
            flex-shrink: 0;
        }
    }
    .loadmore-box {
        padding: 20rpx 0;
    }
}
</style>